<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="home.css">
    <script src="js/home.js"></script>
    <script src="js/ME.js"></script>
</head>

<body>
    <div id="nav">
        <!-- 头部内容 -->
        <div id="nav-center">
            <div id="nav-center-header">
                <div id="header-home-left">
                    <img src="https://oss.51cocoa.com/themes/site/img/logo.png" alt="" width="120px" height="44px">
                    <ul id="left-wen">
                        <li><a>首页</a></li>
                        <li><a>蛋糕</a></li>
                        <li><a>面包</a></li>
                        <li><a>下午茶</a></li>
                        <li><a>冰激凌</a></li>
                        <li><a>全国送</a></li>
                        <li><a>企业专区</a></li>
                    </ul>
                </div>
                <div id="header-home-right">
                    <div id="right-div1">
                        <a id="vx">微信小程序</a>
                        <div id="vx-img">
                            <img src="img/App.png" alt="" />
                            <span>扫码查看小程序</span>
                        </div>
                    </div>

                    <div id="right-div2">
                        <a id="app">APP</a>
                        <div id="vx-img1">
                            <img src="img/vxx.png" alt="" />
                            <span>扫码下载APP</span>
                        </div>
                    </div>
                    <div id="right-div3">
                        <a id="bj">北京<span><img src="img/sanjiao.png" alt=""></span></a>
                        <ul id="div3-wen1">
                            <li>上海</li>
                            <li>天津</li>
                            <li>杭州</li>
                            <li>无锡</li>
                            <li>广州</li>
                            <li>深圳</li>
                            <li>佛山</li>
                        </ul>
                    </div>
                    <div id="right-div4">
                        <a id="nes">消息</a>
                        <ul id="div4-wen1">
                            <li>通知</li>
                            <li>物流</li>
                        </ul>
                    </div>
                    <div id="right-div5">
                        <p>
                            <a>登录</a>
                            <span>/</span>
                            <a>注册</a>
                        </p>
                    </div>
                    <a href=""><img src="img/car.png" id="car"></a>
                </div>
            </div>
        </div>
        <!-- </div> -->
        <!-- 轮廓图位置 -->
        <div id="try">
            <div id="try-div1">
                <div id="div1-left">
                    <div id="left-da1">
                        <p id="da1-wen1">
                            “棒子巧克力可颂，<br />会保佑每个准备过冬的人。”
                        </p>
                        <p id="da1-wen2">—21cake新品“巧克力可颂”<br />上线接受预订。</p>
                        <div id="da1-wen3">立即定购></div>
                    </div>
                </div>
                <div id="div1-right">
                    <img src="img/bread.png" alt="">
                </div>
            </div>
            <div id="try-div2">
                <div id="div2-left">
                    <div id="left-da2">
                        <p id="da1-wen1">“三种芒果，做一块芒果蛋糕”</p>
                        <p id="da1-wen2">———《芒果奶油蛋糕》<br />
                            升级为自主研发桂七、台农慕斯夹心<br />
                            表层芒果块替换为当季凯特鲜芒
                        </p>
                        <div id="da1-wen3">立即定购></div>
                    </div>
                </div>
                <div id="div2-right">
                    <img src="img/mangguo.jpg" alt="">
                </div>
            </div>
            <div id="try-div3">
                <div id="div3-left">
                    <div id="left-da3">
                        <p id="da1-wen1">超凶的虎尾巴，2条</p>
                        <p id="da1-wen2">————《奥呜》缩小版上线<br />
                            白脱&芝士奶油夹心，<br />
                            亲切的分量与价格。
                        </p>
                        <div id="da1-wen3">立即定购></div>
                    </div>
                </div>
                <div id="div2-right">
                    <img src="img/zhishi.png" alt="">
                </div>
            </div>
            <div id="try-falst">
                <div id="hd1"></div>
                <div id="hd2"></div>
                <div id="hd3"></div>
            </div>
        </div>
        <script>
            // 获取每个不同的轮播图
            var trydiv1 = sk("#try-div1");
            var trydiv2 = sk("#try-div2");
            var trydiv3 = sk("#try-div3");
            // 设置一个变量名
            var arr = 1;
            // 给它设置一个变量名，用来需要触碰时停止
            setInterval(function () {
                if (arr == 0) {
                    // 当arr等于0面包轮播图显示，芝士轮播图隐藏
                    trydiv3.style.display = 'none';
                    trydiv1.style.display = 'flex';
                    sk("#hd1").style.background = 'red';
                    sk("#hd3").style.background = '#FFF';
                }
                if (arr == 1) {
                    // 当arr等于1芒果轮播图显示，面包轮播图隐藏
                    trydiv1.style.display = 'none';
                    trydiv2.style.display = 'flex';
                    sk("#hd2").style.background = 'red';
                    sk("#hd1").style.background = '#FFF';
                }
                if (arr == 2) {
                    // 当arr等于2芝士轮播图显示，芒果轮播图隐藏
                    trydiv2.style.display = 'none';
                    trydiv3.style.display = 'flex';
                    sk("#hd3").style.background = 'red';
                    sk("#hd2").style.background = '#FFF';
                }
                // 设置一个arr+1，每轮一回arr就加一
                arr += 1;
                // 设置一个判断，当arr大于等于3时，arr就等于0
                if (arr >= 3) {
                    arr = 0
                }
            }, 3000);
        </script>
        <!-- 蛋糕列表 -->
        <div id="bul">
            <a href="#i1" id="b-num1"><img src="img/new.jpg" alt=""></a>
            <a href="#i2" id="b-num2"><img src="img/birth.jpg" alt=""></a>
            <a href="#i3" id="b-num3"><img src="img/children.png" alt=""></a>
            <a href="#i4" id="b-num4"><img src="img/party.jpg" alt=""></a>
            <a href="#i5" id="b-num5"><img src="img/event.png" alt=""></a>
        </div>
        <!-- 新品专区 -->
        <div id="NEW">
            <a id="i1">
                <p><span id="span1">新品</span><span id="span2">/专区</span></p>
            </a>
            <img src="img/new1.png" alt="">
            <div id="NEW-last">
                <div id="last1">
                    <img src="img/new2.png" alt="">
                    <p id="line">无尽夏<br /><span id="last1-wen1">人生有尽，夏日无尽</span></p>
                    <p id="last1-wen2">新品></p>
                    <p id="hr"></p>
                    <p>
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last2">
                    <img src="img/new3.png" alt="">
                    <p id="line1">猫山王<br /><span id="last1-wen1">猫山王就是神一般的存在</span></p>
                    <p id="last2-wen1">情侣></p>
                    <p id="last2-wen2">新品></p>
                    <p id="hr"></p>
                    <p id="last2-wen5">
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last3">
                    <img src="img/new4.png" alt="">
                    <p id="line1">橘与桔<br /><span id="last1-wen1">只一口，也值得记住</span></p>
                    <p id="hr"></p>
                    <p id="last3-wen5">
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last4">
                    <img src="img/new5.png" alt="">
                    <p id="line2">芒果奶油蛋糕<br /><span id="last1-wen1">三种芒果，做一块芒果蛋糕</span></p>
                    <p id="last1-wen2">新品></p>
                    <p id="hr"></p>
                    <p id="last4-wen5">
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 生日专区 -->
        <div id="NEW">
            <a id="i2">
                <p><span id="span1">生日</span><span id="span2">/专区</span></p>
            </a>
            <img src="img/birth1.jpg" alt="">
            <div id="NEW-last">
                <div id="last1">
                    <img src="img/birth2.png" alt="">
                    <p id="line">深爱<br /><span id="last1-wen1">玫瑰蜜腺，丰富口感</span></p>
                    <p id="last2-wen1">新品></p>
                    <p id="last2-wen2">生日></p>
                    <p id="hr"></p>
                    <p>
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last2">
                    <img src="img/birth3.png" alt="">
                    <p id="line1">茉莉花<br /><span id="last1-wen1">淡金色茉莉花糖，浸满整朵茉莉花</span></p>
                    <p id="last2-wen1">新品></p>
                    <p id="last2-wen2">生日></p>
                    <p id="hr"></p>
                    <p id="last2-wen5">
                        <span id="last1-wen3">¥398.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last3">
                    <img src="img/birth4.png" alt="">
                    <p id="line1">金枝<br /><span id="last1-wen1">来自高知县的柚子，和法国覆盆子</span></p>
                    <p id="hr"></p>
                    <p id="last3-wen5">
                        <span id="last1-wen3">¥298.00/454g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last4">
                    <img src="img/birth5.png" alt="">
                    <p id="line2">朗姆芝士<br /><span id="last1-wen1">这是一个拘谨的浪漫主义者</span></p>
                    <div id="last4-d1">
                        <p id="last1-wen2">含酒></p>
                        <p id="last4-wen3">情侣></p>
                        <p id="last4-wen4">情侣></p>
                    </div>

                    <p id="hr"></p>
                    <p id="last4-wen5">
                        <span id="last1-wen3">¥298.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 儿童 -->
        <div id="NEW">
            <a id="i3">
                <p><span id="span1">儿童</span><span id="span2">/专区</span></p>
            </a>
            <img src="img/children1.jpg" alt="">
            <div id="NEW-last">
                <div id="last1">
                    <img src="img/children2.png" alt="">
                    <p id="line">黑白巧克力慕斯 比德尔(Party)<br /><span id="last1-wen1">“孩子的世界，简单到非黑即白。”</span></p>
                    <p id="last2-wen1">新品></p>
                    <p id="last2-wen2">生日></p>
                    <p id="hr"></p>
                    <p>
                        <span id="last1-wen3">¥198.00/908g(1.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last2">
                    <img src="img/children3.png" alt="">
                    <p id="line1">(新)杰瑞<br /><span id="last1-wen1">以奶酪的孔洞造型呈现</span></p>
                    <p id="last2-wen1">儿子></p>
                    <p id="last2-wen2">聚会></p>
                    <p id="hr"></p>
                    <p id="last2-wen5">
                        <span id="last1-wen3">¥198.00/454g(1.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last3">
                    <img src="img/children4.png" alt="">
                    <p id="line1">儿童套餐<br /><span id="last1-wen1">明亮、健康、有趣</span></p>
                    <p id="last2-wen1">套餐></p>
                    <p id="hr"></p>
                    <p id="last3-wen5">
                        <span id="last1-wen3">¥298.00/454g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last4">
                </div>
            </div>
        </div>
        <!-- 聚会 -->
        <div id="NEW">
            <a id="i4">
                <p><span id="span1">聚会</span><span id="span2">/专区</span></p>
            </a>
            <img src="img/event1.jpg" alt="">
            <div id="NEW-last">
                <div id="last1">
                    <img src="img/event2.png" alt="">
                    <p id="line">黑白巧克力慕斯<br /><span id="last1-wen1">白巧克力慕斯的甜，与黑巧克力酱的苦</span></p>
                    <p id="last2-wen1">聚会></p>
                    <p id="last2-wen2">人气></p>
                    <p id="hr"></p>
                    <p>
                        <span id="last1-wen3">¥298.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last2">
                    <img src="img/event3.png" alt="">
                    <p id="line1">黑方<br /><span id="last1-wen1">法国白兰地的味道，更衬纯黑巧克力的...</span></p>
                    <p id="last2-wen1">含酒></p>
                    <p id="last2-wen2">聚会></p>
                    <p id="hr"></p>
                    <p id="last2-wen5">
                        <span id="last1-wen3">¥298.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last3">
                    <img src="img/event4.png" alt="">
                    <p id="line1">嗷呜<br /><span id="last1-wen1">虎尾巴变小了</span></p>
                    <p id="last2-wen1">新品></p>
                    <p id="hr"></p>
                    <p id="last3-wen5">
                        <span id="last1-wen3">¥68.00/400g(嗷+呜)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
                <div id="last4">
                    <img src="img/event5.png" alt="">
                    <p id="line2">花果香挂耳咖啡<br /><span id="last1-wen1">花果香挂耳咖啡</span></p>
                    <div id="last4-d1">
                    </div>
                    <p id="hr"></p>
                    <p id="last4-wen5">
                        <span id="last1-wen3">¥298.00/908g(2.0磅)</span>
                        <a id="last1-wen4">加入购物车</a>
                    </p>
                </div>
            </div>
        </div>
        <!-- 廿一客 -->
        <div class="fove" id="i5">
            <p>
                <span id="span1">廿一客</span>
                <span id="span2">/文章</span>
                <a href="">查看更多 >></a>
            </p>
            <br>
            <div id="fove-center">
                <div id="fove-left">
                    <a href=""><img src="img/eass1.JPG" alt=""></a>

                    &nbsp;&nbsp;&nbsp;&nbsp;<p id="left-wen1">冬季刊·进博会</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;<p id="left-wen2">阅读全文></p>

                </div>
                <div id="fove-right">
                    <a href=""><img src="img/eass2.JPG" alt=""></a>

                    &nbsp;&nbsp;&nbsp;&nbsp;<p id="left-wen1">廿一志秋刊·客服Q&A</p>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;<p id="left-wen2">阅读全文></p>

                </div>
            </div>
        </div>
        <!-- 客服 -->
        <div id="foot">
            <div id="foot-center">
                <div id="center1">
                    <img src="https://oss.51cocoa.com/themes/site/img/footer-logo-v2.png" alt="">
                    <p>始终提供符合人类<br />进步的事物</p>
                    <img src="https://oss.51cocoa.com/themes/site/img/footer-icon-weibo.png" alt="">
                    <img src="https://oss.51cocoa.com/themes/site/img/footer-icon-weixin.png" id="Chatmax" alt="">
                    <img src="https://oss.51cocoa.com/themes/site/img/footer-icon-app.png" id="Appmax" alt="">
                    <div id="Chatmaxlast"><img src="img/chatmax.png" alt=""></div>
                    <div id="Appmaxlast"><img src="img/Appmax.png" alt=""></div>
                </div>
                <div id="center2">
                    <p id="center1-wen">关于我们</p>
                    <p>
                        <span id="center1-wen2">联系我们</span><br />
                        <span id="center1-wen1">
                            订购专线：400 650 2121 （服务时间 08:00–22:00）；<br />
                            企业团购热线：021-37768289；<br />
                            客服电话：021-23099721（全国）；<br />
                            kefu@21cake.com（邮箱）；<br />
                        </span>
                    </p>
                    <p id="center1-wen">
                        订购文字<br />
                        企业合作<br />
                        生产经营资质<br />
                        公告专区<br />
                    </p>
                </div>
                <div id="center3">
                    <p id="center1-wen">订购时间</p>
                    <p id="center1-wen1">
                        杭州/广州：提前5小时预订；
                        北京：提前6小时预订；
                        上海：提前5.5-6小时预订；
                        天津/苏州/无锡/深圳：提前8小时预订（部分偏远地区除外，当日22点以后订单，于次日8点开始审核）
                        <br /><br />
                        当日蛋糕配送截止下单时间：北京/上
                        海：14:30；杭州：13:40；广州/深圳：
                        11：00；天津：10:30；苏州/无锡：T+1
                        天
                        <br /><br />
                        具体送达时间以页面选择为准
                    </p>
                </div>
                <div id="center4">
                    <p id="center1-wen">网络运营</p>
                    <p id="center1-wen1">
                        网站注册公司名称: 北京廿一客食品有限公司 成立于2008年02月14日注册<br />
                        地址: 北京市北京经济技术开发区兴海二街5号院3号楼<br />
                        网站运营：廿一客（上海）电子商务有限公司 地址：上海市松江区新效支路518号<br />
                        上海廿一客食品有限公司分公司 地址：上海市松江区新效支路518号<br />
                        杭州廿一客食品有限公司 地址：杭州市滨江区秋溢路500号<br />
                        广州廿一客食品有限公司 地址：广州市南沙区东涌镇鱼窝头大道段<br />
                        北京廿一客食品有限公司 地址：北京市北京经济技术开发区兴海二街5号院<br />
                        深圳廿一客贸易有限公司 地址：深圳市福田区星河世纪大厦A栋1717<br />
                        天津廿一客食品有限公司 地址：天津市河西区麦收大厦2-2004<br />
                        广州廿一客食品贸易有限公司 地址：广州市南沙区东涌镇鱼窝头大道段<br />
                        举实（上海）食品有限公司 地址：上海市松江区新效支路518号
                    </p>
                </div>
            </div>
            <p id="foot-hr"></p>
            <p id="foot-p">
                Copyright© 21Cake蛋糕官网商城 2007-2022, 版权所有 京ICP备14006254号-1 京公网安备11030102010682号
            </p>
        </div>

    </div>

</html>